<template>
	<div class="wrap">
		<!-- 搜索条件 -->
		<el-form ref="form" :inline="true" size="small" :model="forms" class="form" label-width="100px">
			<el-form-item label="用户手机号" prop="player_mobile">
				<el-input
					v-model="forms.player_mobile"
					placeholder="请输入"
					clearable
					style="width: 175px"
				/>
			</el-form-item>
			<el-form-item label="用户姓名" prop="player_name">
				<el-input v-model="forms.player_name" placeholder="请输入" clearable style="width: 175px" />
			</el-form-item>
			<el-form-item label="用户身份证号" prop="player_cid">
				<el-input v-model="forms.player_cid" placeholder="请输入" clearable style="width: 175px" />
			</el-form-item>
			<el-form-item label="赛事名称：" prop="race_id">
				<el-select
					v-model="forms.race_id"
					placeholder="请选择"
					style="width: 175px"
					clearable
					filterable
				>
					<el-option label="全部" value="" />
					<el-option
						:label="item.race_name"
						:value="item.race_id"
						v-for="item in raceOptions"
						:key="item.race_id"
					/>
				</el-select>
			</el-form-item>
			<p class="line">
				<el-button icon="el-icon-search" type="primary" size="small" @click="loadData">
					搜索
				</el-button>
			</p>
		</el-form>
		<div class="answer-bot">
			<el-table
				style="margin-top: 15px"
				:data="tableData"
				stripe
				:cell-style="() => ({ textAlign: 'center' })"
				:header-cell-style="() => ({ textAlign: 'center' })"
				border
				size="small"
			>
				<el-table-column label="序号" width="60px" type="index" />
				<el-table-column label="订单编号" prop="order_id" min-width="90px" show-overflow-tooltip />
				<el-table-column
					label="用户姓名"
					prop="player_name"
					min-width="120px"
					show-overflow-tooltip
				/>
				<el-table-column
					label="用户手机号"
					prop="player_mobile"
					min-width="120px"
					show-overflow-tooltip
				/>
				<el-table-column
					label="性别"
					min-width="100px"
					show-overflow-tooltip
					:formatter="
						row => (row.player.player_sex == 1 ? '男' : row.player.player_sex == 2 ? '女' : '--')
					"
				/>
				<el-table-column
					label="证件类型"
					min-width="100px"
					show-overflow-tooltip
					:formatter="
						row =>
							row.player.player_cid == 1 ? '身份证' : row.player.player_cid == 2 ? '护照' : '--'
					"
				/>
				<el-table-column
					label="证件号码"
					min-width="160px"
					show-overflow-tooltip
					:formatter="row => row.player.player_cid_no || '--'"
				/>
				<el-table-column
					label="报名类型"
					min-width="100px"
					show-overflow-tooltip
					:formatter="
						row =>
							row.player.player_type == 1 ? '成人' : row.player.player_type == 2 ? '儿童' : '--'
					"
				/>
				<el-table-column
					label="赛事名称"
					prop="group_name"
					min-width="160px"
					show-overflow-tooltip
					:formatter="row => row.race.race_name"
				/>
				<el-table-column
					label="赛事分组"
					prop="group_name"
					min-width="160px"
					show-overflow-tooltip
				/>
				<el-table-column label="报名时间" prop="add_time" min-width="160px" show-overflow-tooltip />
				<el-table-column
					label="支付金额(元)"
					prop="pay_money"
					min-width="120"
					show-overflow-tooltip
				/>
				<el-table-column
					label="支付状态"
					min-width="120"
					show-overflow-tooltip
					:formatter="row => (row.is_pay == 1 ? '已支付' : '未支付')"
				/>
				<el-table-column
					align="center"
					label="退款状态"
					min-width="110"
					show-overflow-tooltip
					:formatter="
						row =>
							row.refund_status == 1
								? '已申请退款'
								: row.refund_status == 2
								? '已退款'
								: row.refund_status == 3
								? '退款未通过'
								: '--'
					"
				/>
				<el-table-column label="用户签名" min-width="100px">
					<template slot-scope="{ row }">
						<el-popover placement="right" trigger="click" v-if="row.sign_img">
							<div class="popover">
								<el-image
									style="width: 420px; height: auto"
									:src="row.sign_img"
									fit="contain"
									:preview-src-list="[row.sign_img]"
								></el-image>
							</div>
							<div
								slot="reference"
								:style="{ display: 'block', color: '#3666FF', cursor: 'pointer' }"
							>
								点击查看
							</div>
						</el-popover>

						<span v-else>无</span>
					</template>
				</el-table-column>
				<el-table-column label="参赛号" min-width="100px" show-overflow-tooltip prop="race_num" />
				<el-table-column
					label="领物窗口号"
					prop="window_num"
					min-width="110px"
					show-overflow-tooltip
				/>
				<el-table-column
					label="存取衣号"
					prop="clothes_num"
					min-width="120px"
					show-overflow-tooltip
				/>
				<el-table-column
					label="服装尺码"
					min-width="100px"
					show-overflow-tooltip
					:formatter="row => row.player.player_clothes || '--'"
				/>
				<el-table-column label="操作" width="100" fixed="right">
					<template slot-scope="{ row }">
						<el-button
							type="text"
							@click="$refs.shenhe.initData(row)"
							v-prevent-click="1500"
							style="padding: 0"
							:disabled="
								row.is_pay == 0 ||
								row.refund_status == 1 ||
								row.refund_status == 2 ||
								row.pay_money < 0.01
							"
						>
							退款
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-row type="flex" justify="center">
				<el-col :span="24" style="text-align: right">
					<Pagination
						:total="total"
						:page.sync="pageNo"
						:limit.sync="pageSize"
						scroll-el="el-main"
						@pagination="loadData"
					/>
				</el-col>
			</el-row>
		</div>
		<shenhe ref="shenhe" />
	</div>
</template>

<script>
	import { adminOrderList, orderRefund } from '@/api/order'
	import { getList } from '@/api/competition-manage'
	import Pagination from '@/components/Pagination'
	import shenhe from './components/shenhe'
	export default {
		components: {
			Pagination,
			shenhe
		},
		data() {
			return {
				forms: {
					race_id: '',
					player_name: '',
					player_mobile: '',
					player_cid: ''
				},
				pageNo: 1,
				pageSize: 10,
				total: 0,
				tableData: [],
				raceOptions: []
			}
		},
		created() {
			this.queryRaceData()
			this.loadData()
		},
		methods: {
			queryRaceData() {
				getList({
					page_no: 1,
					page_size: 200
				}).then(res => {
					this.raceOptions = res.data.lists
				})
			},
			// 搜索
			searchData() {
				this.pageNo = 1
				this.loadData()
			},
			// 分页
			pageChange({ page, limit }) {
				this.pageNo = page
				this.pageSize = limit
				this.loadData()
			},
			loadData() {
				const loading = this.$setLoading()
				const data = {
					...this.forms,
					p: this.pageNo,
					size: this.pageSize
				}
				this.tableData = []
				adminOrderList(data).then(
					res => {
						this.tableData = res.data.lists
						this.total = Number(res.data.total)
						loading.close()
					},
					err => {
						loading.close()
					}
				)
			},
			seeDetails(row) {
				this.$refs.details.init(row)
			},
			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			onSubmitRefuse(item) {
				this.$prompt(
					`<p><b>是否拒绝梁先生15633332222退费?</b><span style="display:block;margin-top:5px;">请输入拒绝原因</p>`,
					'退费确认',
					{
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						inputPattern: /\S/,
						inputErrorMessage: '拒绝原因不能为空',
						dangerouslyUseHTMLString: true
					}
				)
					.then(({ value }) => {
						const loading = this.$setLoading({ text: '提交中，请稍等~' })
						// check_status1通过2拒绝
						orderRefund({
							order_id: item.id,
							check_status: 0,
							check_rerson: value.trim()
						}).then(
							res => {
								this.$message.success('支付提交成功！')
								this.loadData()
								loading.close()
							},
							err => {
								loading.close()
							}
						)
					})
					.catch(() => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.el-link {
		margin: 0 5px;
	}
	.form {
		background: #ffffff;
		padding: 20px 10px 0;
		margin-bottom: 10px;
		border-radius: 2px;
		display: flex;
		flex-wrap: wrap;
	}
	.line {
		height: 36px;
		margin: 0 0 10px 18px;
		border-left: 1px solid #e5e6eb !important;
		padding: 0 0 0 18px;
	}
	.answer-bot {
		padding: 16px;
		border-radius: 2px;
		background-color: #ffffff;
		.bot-title {
			font-size: 16px;
			font-family: PingFangSC-Regular, PingFang SC;
			color: #000000;
		}
	}
	::v-deep {
		.el-link {
			margin: 0 8px;
		}
		.el-button--medium {
			padding: 6px 5px;
		}
	}
</style>
